<template>
    <div>
        <back-head title="商品池"></back-head>
        <!-- 搜索条件 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>账号列表</span>
                <el-button type="success" size="small" icon="el-icon-lx-roundadd" @click="editBtn(0)" class="createBtn">添加账号</el-button>
            </div>
            
            <el-row>
                <el-table
                    ref="list"
                    border
                    :data="dataList"
                    highlight-current-row
                    style="width: 100%;">
                    <el-table-column
                        property="id"
                        label="序号">
                    </el-table-column>
                    <el-table-column                        
                        label="所属平台">
                        <template slot-scope="scope">
                            {{distributionList[scope.row.channel] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="所属公司">
                        <template slot-scope="scope">
                            {{ascriptionList[scope.row.belong] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="company"
                        min-width="100"
                        label="账户名称">
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        label="账号">
                    </el-table-column>
                    <el-table-column
                        min-width="200"
                        label="密码">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.userPassword" placement="top">
                                <span class="overflow">{{scope.row.userPassword}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit" @click="editBtn(1,scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>
        
        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>

        <!-- 创建/编辑弹窗 -->
        <el-dialog :title="editType == 0? '添加账号':'编辑'" :visible.sync="dialogFormVisible" width="500px" @close="closeEdit" v-dialogDrag>
            <el-form 
                :model="editForm" 
                :rules="rules" 
                label-width="100px" 
                @keyup.enter.native="submitEdit('ruleForm')" 
                ref="ruleForm">
                <el-form-item label="所属公司：" prop="belong">
                    <el-select v-model.number="editForm.belong" class="dialogInput" placeholder="请选择">
                        <el-option
                            v-for="(value, key) in ascriptionList"
                            :key="key"
                            :label="value"
                            :value="Number(key)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属平台：" prop="channel">
                    <el-select v-model.number="editForm.channel" class="dialogInput" placeholder="请选择">
                        <el-option
                            v-for="(value, key) in distributionList"
                            :key="key"
                            :label="value"
                            :value="Number(key)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="账户名称：" prop="company">
                    <el-input v-model="editForm.company" class="dialogInput" placeholder="请输入账户名称"></el-input>
                </el-form-item>
                <el-form-item label="账户：" prop="userName">
                    <el-input v-model="editForm.userName" class="dialogInput" placeholder="请输入账户"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="userPassword">
                    <el-input v-model="editForm.userPassword" class="dialogInput" placeholder="请输入密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit('ruleForm')">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'goodsPool',
        data() {
            return {
                distributionList: {
                    1 : '追电',
                    2 : '亿美商城'
                },
                ascriptionList: {
                    1 : '欧飞',
                    2 : '拉卡拉',
                    3 : '雪虎'
                },
                statusList: {
                    0 : '待使用',
                    1 : '使用中',
                    2 : '停用'
                },
                dataList: [],
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 0,
                dialogFormVisible: false,
                editType : '',
                editForm: {},
                rules: {
                    ascription : [{ required: true, message: '请选择所属公司', trigger: 'blur'}],
                    distribution : [{ required: true, message: '请选择所属平台', trigger: 'blur'}],
                    company : [{ required: true, message: '请输入账户名称', trigger: 'blur'}],
                    userName : [{ required: true, message: '请输入账户', trigger: 'blur'}],
                    userPassword : [{ required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        computed: {
            
        },
        created(){
            
        },
        mounted(){
            this.getData();  //获取列表数据
        },
        methods: {
            getData(){
                this.$axios
                    .post("/admin/provider/queryList.json",{
                        pageNo: this.current,
                        pageSize: this.pageSize
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.list;

                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }
                            
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            },
            editBtn(type,data){            
                this.editType = type;
                this.editForm = type == 0 ? {} : JSON.parse(JSON.stringify(data));
                this.dialogFormVisible = true;
            },
            closeEdit(){
                this.$refs['ruleForm'].resetFields();    //初始化表单验证
            },
            submitEdit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios
                            .post("/admin/provider/saveOrUpdate.json",{
                                id: this.editForm.id,
                                company: this.editForm.company,
                                userName: this.editForm.userName,
                                userPassword: this.editForm.userPassword,
                                belong: this.editForm.belong,
                                channel: this.editForm.channel  
                            })
                            .then(res => {
                                const data = res.data;
                                if(data.success){
                                    this.$message.success("操作成功！");
                                    this.dialogFormVisible = false;
                                    this.getData();
                                }else{
                                    this.$message.error(data.message);
                                } 
                            })
                    } else {                        
                        return false;
                    }
                });
            }
        }
    }

</script>


<style scoped>
    .createBtn{
        float: right;
        margin-top: -6.5px;
        margin-right: 10px;
    }
    .dialogInput{
        width: 250px;
    }
    .overflow{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
